img {
    content: normal !important;
}

html,
body {
    margin: 0;
    padding: 0;
}

.action {
    background: #3F4EF3;
    position: relative;

    .wx_tips {
        width: 100vw;
        height: 100%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, .7);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10001;
        // display: none;

        img {
            width: 600px;
            position: absolute;
            right: 20px;
            top: 20px;
        }
    }

    .banner {
        width: 100%;

        >img {
            width: 100%;
        }
    }

    .box {
        width: 716px;
        height: 622px;
        background: url(./img/box-bg.png);
        background-size: 100% 100%;
        margin: 0 auto;
        position: relative;

        .box-title {
            width: 423px;
            height: 71px;
            position: absolute;
            z-index: 5;
            left: 50%;
            transform: translateX(-50%);
            top: -20px;
        }

        .good-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            padding-top: 45px;
            height: 420px;

            .good {
                width: 190px;
                height: 190px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #FFFFFF;
                border-radius: 10px;
                margin-top: 17px;

                >img {
                    width: 150px;
                    display: block;
                    margin: 0 auto;
                }
            }
        }

        .box-btn {
            width: 567px;
            margin: 30px auto 0;
            height: 78px;
            background: url(./img/btn.png);
            background-size: 100% 100%;
        }
    }

    .list .list-title {
        display: block;
        width: 481px;
        height: 31px;
        margin: 36px auto 40px;
    }

    .list-content {
        width: 718px;
        margin: 0 auto;
    }

    .list-content .list-item {
        width: 718px;
        height: 310px;
        background: #FFFFFF;
        border-radius: 21px;
    }
}

.list {
    padding: 0 22px 0 20px;

    .magic-bag-container {
        margin-bottom: 20px;
        padding: 19px 15px 19px 19px;
        background: #FFFFFF;
        border-radius: 30px;
        display: flex;
        flex-direction: row;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .image-wrapper {
        flex-shrink: 0;
        position: relative;
        width: 271px;
        height: 271px;


    }

    .magic-img {
        height: 271px;
        width: 271px;
    }


    .tag {
        position: absolute;
        top: 10px;
        left: -16px;
        width: 69px;
        height: 28px;
        border-radius: 0px 0px 14px 0px;
        font-size: 24px;
        line-height: 28px;
        text-align: center;
        font-weight: 500;
        color: #FFFFFF;

        &::after {
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            transform: translateY(100%);
            height: 0;
            width: 0;
        }
    }

    .hot-bg {
        background: linear-gradient(90deg, #FF0863, #FF5877);

        &::after {
            border-left: 8px solid transparent;
            border-top: 5px solid #F51F56;
            border-bottom: 5px solid transparent;
            border-right: 8px solid #F51F56;
        }
    }

    .new-bg {
        background: linear-gradient(90deg, #C96D00, #FFB53B);

        &::after {
            border-left: 8px solid transparent;
            border-top: 5px solid #FBE0A3;
            border-bottom: 5px solid transparent;
            border-right: 8px solid #FBE0A3;
        }
    }


    .box-info {
        flex: 1;
        margin-right: 10px;
        margin-left: 13px;
        padding-top: 6px;
        padding-right: 10px;
    }

    .box-bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .box-bottom-left {
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
        align-items: center;
    }

    .title {
        width: 350px;
        font-size: 30px;
        line-height: 30px;
        height: 30px;
        font-weight: 500;
        color: #111111;
        display: block;
    }

    .desc {
        width: 350px;
        margin-top: 21px;
        margin-bottom: 22px;
        font-size: 24px;
        line-height: 28px;
        height: 56px;
        color: #999999;
    }

    .unit-icon {
        width: 38px;
        height: 48px;
        background: url("./img/coin.png");
        background-size: 100% 100%;
        margin-right: 9px;
    }

    .unit {
        font-size: 26px;
        line-height: 30px;
        color: #FF0036;
        font-weight: bold;
    }

    .price {
        font-size: 33px;
        line-height: 33px;
        color: #111111;
        font-weight: bold;
    }

    .price-text {
        text-align: left;
    }

    .price-tail {
        font-size: 26px;
        line-height: 30px;
        color: #FF0036;
        font-weight: bold;
    }

    .buy-number {
        font-size: 21px;
        color: #666666;
    }

    .image-list-wrapper {
        padding-top: 22px;
        border-top: 1px solid #ECECEC;
        margin-top: 19px;
        display: flex;
        flex-direction: row;

    }

    .product-img {
        margin-right: 8px;
        height: 68px;
        width: 68px;
        box-sizing: border-box;

        &:last-child {
            margin-right: 0;
        }
    }

    .more-package {
        width: 721px;
        height: 96px;
        display: block;
        margin: 30px auto 0;
    }

    .list-bottom {
        margin: 28px auto 30px;
        font-size: 22px;
        color: #80BDFC;
        text-align: center;
    }
}

.footer {
    margin-top: 32px;

    .title {
        font-size: 32px;
        font-weight: 500;
        color: #80BDFC;
        position: relative;
        text-align: center;
        width: 526px;
        margin: 0 auto;
    }

    .title:after,
    .title:before {
        position: absolute;
        top: 50%;
        background: #80BDFC;
        content: "";
        height: 1px;
        width: 80px;
    }

    /*调整背景横线的左右距离*/
    .title:before {
        left: 0;
    }

    .title:after {
        right: 0;
    }

    .content {
        width: 693px;
        margin: 0 auto;
        letter-spacing: 2px;
        line-height: 44px;
        padding: 38px 0 54px;
        font-size: 25px;
        font-weight: 400;
        color: #80BDFC;
    }
}